import { motion } from 'framer-motion';
import { CloseIcon, style, ThemeMode } from '@ycx/ui';
import { ConfigProvider, Descriptions, Flex, Skeleton } from 'antd';
import { createStyles } from 'antd-style';
import { DescriptionsItemType } from 'antd/es/descriptions';
import { FC, useState } from 'react';
import { useTheme } from '@/store/settingsStore.ts';

const useStyle = createStyles(({ css }) => {
  return {
    wrapper: css`
      border-radius: 8px;
      background: var(--ycx-card-bg-color);
      box-shadow: 0 8px 12px 0 rgba(119, 130, 153, 0.08);
      position: absolute;
      right: 92px;
      top: 24px;
      width: 300px;
      overflow: hidden;
      padding: 16px 0 8px;
    `,
  };
});

type Props = {
  items: DescriptionsItemType[];
};

const SummaryWindow: FC<Props> = ({ items }) => {
  const theme = useTheme();
  const [collapse, setCollapse] = useState(true);

  const FoldIcon = (props: { className: string }) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="8"
      height="8"
      viewBox="0 0 8 8"
      fill="none"
      {...props}
    >
      <path
        d="M1 4L4 7L7 4"
        stroke="#33394F"
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        opacity="0.4"
        d="M1 1L4 4L7 1"
        stroke={
          theme === ThemeMode.Light ? style.fontColorLevelTwoLight : style.fontColorLevelTwoDark
        }
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );

  const { styles } = useStyle();

  return (
    <Flex vertical className={styles.wrapper} align="center" gap={8}>
      <motion.div
        style={{ padding: '0 24px', overflow: 'hidden' }}
        animate={{
          height: collapse ? 240 : 'auto',
        }}
        transition={{
          type: 'spring',
          stiffness: 500,
          damping: 40,
        }}
      >
        <Flex justify="space-between" align="center" className="mb-6">
          <span className="text-lg">总体数据</span>
          <CloseIcon style={{ color: 'var(--ycx-font-color-l3)', fontSize: '24px' }} />
        </Flex>

        {items.length ? (
          <>
            <ConfigProvider
              theme={{
                components: {
                  Descriptions: {
                    fontSize: 12,
                    colorTextTertiary: 'var(--ycx-font-color-l3)',
                  },
                },
              }}
            >
              <Descriptions labelStyle={{ width: '75px' }} size="small" column={24} items={items} />
            </ConfigProvider>
          </>
        ) : (
          <Skeleton active />
        )}
      </motion.div>
      <Flex
        className="cursor-pointer text-xs"
        style={{ color: 'var(--ycx-font-color-l3)' }}
        justify="center"
        align="center"
        gap={4}
        onClick={() => setCollapse(!collapse)}
      >
        <FoldIcon className={!collapse ? 'rotate-180' : ''} />
        {collapse ? '展开' : '收起'}
      </Flex>
    </Flex>
  );
};

export default SummaryWindow;
